<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上移</title>
		<style type="text/css">
		*{
			margin: 0 auto;
		}
		table{
			border: 1px solid #000000;
			text-align: center;
			width: 500px;
			height: 300px;
			background: skyblue;
		}
		table td{
			background: #FFFFFF;
		}
		table input {
			color: orange;
			border: 0px;
			outline: none;
		}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>爱好</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
	</body>
	<script>
	;(function(){
		var obj = {
		  "data":[{
		 		"id": "1",
		 		"Name": "kky1",
		 		"age": "15",
		 		"sex": "男",
		 		"hoby": "学习",
		 		
		 	},{
		 		"id": "2",
		 		"Name": "kky2小明",
		 		"age": "16",
		 		"sex": "男",
		 		"hoby": "学习  健身",
		 	}
		 	,{
		 		"id": "3",
		 		"Name": "kky3",
		 		"age": "117",
		 		"sex": "男",
		 		"hoby": "学习",
		 	},{
		 		"id": "4",
		 		"Name": "kky4",
		 		"age": "18",
		 		"sex": "男",
		 		"hoby": "学习 健身",
		 	},{
		 		"id": "5",
		 		"Name": "kky5",
		 		"age": "20",
		 		"sex": "男",
		 		"hoby": "学习",
		 	}
		]
		}
		localStorage.data = JSON.stringify(obj.data);
	})();
	var arr = [];
	function getData() {
	 arr = localStorage.data ? JSON.parse(localStorage.data) : [];
	return arr;
}
	window.onload = function(){
		showPage(getData());
	};
	function showPage(arr){
		var tbody = document.querySelector("tbody");
		var str = '';
		for(var i = 0;i<arr.length;i++){
			str+=`
			<tr class = "trs">
			<td>${arr[i].id}</td>
			<td>${arr[i].Name}</td>
			<td>${arr[i].age}</td>
			<td>${arr[i].sex}</td>
			<td>${arr[i].hoby}</td>
			<td>
			<input type="button" value="上移" onclick="up(${arr[i].id})" class = "ups"/>
			<input type="button" value="删除" onclick="del(${arr[i].id})" />
			<input type="button" value="下移" onclick="down(${arr[i].id})" class = "downs"/>
			</td>
			</tr>
			`
		}
		tbody.innerHTML = str;
		var ups = document.querySelectorAll(".ups");
		ups[0].disabled=true;
		var downs = document.querySelectorAll(".downs");
		var num = downs.length;
		downs[num-1].disabled = true;
		
	}
	function del(id){
		for(var i = 0;i<arr.length;i++){
		if(id ==arr[i].id){
			arr.splice(i,1);
			showPage(arr);
		}
	}
	}
	function up(id){
		for(var i = 0;i<arr.length;i++){
		if(id ==arr[i].id){
			var newUp = arr[i];
			arr[i]=arr[i-1];
			arr[i-1]=newUp;
			showPage(arr);
		}
	}
	}
	function down(id){
		for(var i = 0;i<arr.length;i++){
		if(id ==arr[i].id){
			var newDown = arr[i];
			arr[i]=arr[i+1];
			arr[i+1]=newDown;
			showPage(arr);
			break;
		}
	}
	}
	</script>
</html>